<template>
  <view style="padding-bottom: 130rpx">
    <view class="back" @click="goBack">
      <u-icon name="arrow-left" size="24" color="#fff"></u-icon>
    </view>
    <u-swiper :list="list2" height="305"></u-swiper>
    <view class="main">
      <view class="price">
        <view class="l"><text>￥</text>8888</view>
        <view class="hyPri"><text>会员价￥</text>688</view>
      </view>
      <view class="label">立省 ¥200</view>
      <view class="title"> <text class="goodText">旗舰好货</text>小米·口袋照片打印机 家用照片打印机 照片打印机 便携手机蓝牙 </view>
      <view class="gm">
        <view style="width: 300rpx; margin-right: 15rpx">
          <u-line-progress :percentage="20" activeColor="#81d8d0" height="14"></u-line-progress>
        </view>
        400+已购买</view
      >
    </view>
    <view class="main">
      <view>项目明细</view>
      <view class="xm">
        <view>惹急吗</view>
        <view>1次</view>
      </view>
      <view class="ctn">在线咨询(项目信息及与自身匹配度)</view>
    </view>
    <view style="padding: 0 26rpx">
      <FyItem />
    </view>
    <view class="main">
      <view>图文详情</view>
    </view>
    <view class="bottomBox">
      <view class="tjgwc">
        <view class="b" @click="goPage(`/pages/shop/shopInfo`)">
          <image src="" mode="aspectFill" />
          <view>商户</view>
        </view>
        <view class="b">
          <image src="../../static/shop/kf.png" mode="aspectFill" />
          <view class="z">客服</view>
        </view>
      </view>
      <view class="btn">
        <view class="an">
          <u-button type="primary" shape="circle" @click="goPage('/pages/shop/xmConfirmOrder')" style="width: 250rpx" color="#81d8d0">立即购买</u-button>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { goBack, goPage } from "@/utils/commonFn";
import FyItem from "../home/components/FyItem.vue";
const list2 = ["https://cdn.uviewui.com/uview/swiper/swiper1.png", "https://cdn.uviewui.com/uview/swiper/swiper2.png", "https://cdn.uviewui.com/uview/swiper/swiper3.png"];
</script>
<style lang="less" scoped>
.main {
  background: #ffffff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  padding: 32rpx 24rpx;
  .price {
    display: flex;
    align-items: center;
    .l {
      font-size: 48rpx;
      color: #ea3b3b;
      margin-right: 32rpx;
      text {
        font-size: 24rpx;
      }
    }
    .hyPri {
      background: #ea3b3b;
      border-radius: 200rpx 200rpx 200rpx 200rpx;
      padding: 8rpx 18rpx;
      color: #ffffff;
      font-size: 40rpx;
      display: flex;
      align-items: center;
      text {
        font-size: 24rpx;
      }
    }
  }
  .label {
    font-size: 22rpx;
    color: #ea3b3b;
    background: #ffecec;
    width: 116rpx;
    height: 30rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    text-align: center;
  }
  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #000000;
    line-height: 40rpx;
    margin-top: 18rpx;
    .goodText {
      background: #ea3b3b;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      color: #fff;
      text-align: center;
      padding: 2rpx 4rpx;
      margin-right: 4rpx;
    }
  }
  .gm {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #8a8a8d;
    margin-top: 36rpx;
  }
}
.xm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx;
  font-size: 28rpx;
  color: #81d8d0;
  background: #f0faf9;
  margin-top: 24rpx;
}
.ctn {
  margin-top: 32rpx;
  font-size: 24rpx;
  color: #8a8a8d;
}
.bottomBox {
  display: flex;
  justify-content: space-between;
  .tjgwc {
    display: flex;
    align-items: center;
    .b {
      font-size: 24rpx;
      color: #595959;
      margin-right: 60rpx;
      image {
        width: 48rpx;
        height: 48rpx;
        background: #6b7851;
      }
    }
  }
  .btn {
    display: flex;
    .an {
      display: flex;
      font-size: 32rpx;
      color: #ffffff;
      line-height: 46rpx;
      .gwc {
        background: #feca61;
        border-radius: 40rpx 0rpx 0rpx 40rpx;
        padding: 18rpx 30rpx;
      }
      .ljgm {
        background: #f15c5c;
        border-radius: 0rpx 40rpx 40rpx 0rpx;
        padding: 18rpx 46rpx;
      }
    }
  }
}
</style>
